<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <link rel="stylesheet" href="./css/iview.css">
    <script src="./js/vue.js"></script>
    <script src="./js/iview.js"></script>
    <style>
    header {
        width: 100%;
        height: 60px;
        background-color: #1e89e0;
        position: relative;
        z-index: 10;
    }
    
    .s-back-side {
        position: fixed;
        top: 0;
        bottom: 0;
        z-index: 1;
        width: 200px;
        overflow-x: hidden;
        border-right: 1px solid #c2c2c2;
    }
    
    .s-back-side-scroll {
        width: 220px;
        height: 100%;
        padding-top: 60px;
        overflow-x: hidden;
        background-color:#fff;
    }
    
    .s-back-body {
        position: absolute;
        left: 200px;
        right: 0;
        top: 60px;
        bottom: 0;
        width: auto;
        overflow: hidden;
        overflow-y: auto;
        -webkit-box-sizing: border-box;
        -moz-box-sizing: border-box;
        box-sizing: border-box;
    }
    
    .s-back-footer {
        position: fixed;
        left: 200px;
        right: 0;
        bottom: 0;
        height: 44px;
        background-color: #eee;
    }
   
    .s-iframe {
        width: 100%;
        height: 99%;
        margin: 0;
        padding: 0;
        border: 0;
    }
    </style>
</head>

<body>
    <header>
    </header>
    <div class="s-admin" id="app">
        <div class=" s-back-side ">
            <div class="s-back-side-scroll ">
                <!-- 左侧导航区域 -->
                <template >
                    <Row>
                        <Col span="8 ">
                        <i-Menu :theme="theme2 " @on-select="changePage">
                            <Menu-item name="personnel_manager" >人员管理</Menu-item>
                            <Menu-item name="position_manager">职位管理</Menu-item>
                            <Menu-item name="salary_manager">薪资管理</Menu-item>
                        </i-Menu>
                        </Col>
                    </Row>
                </template>
            </div>
        </div>
        <div class="s-back-body " id="s-back-body">
            <!-- 内容主体区域 -->
            <iframe class="s-iframe " id="ifrme-panle " :src="iframeSrc">
            </iframe>
        </div>
        <!-- 底部固定区域 -->
    </div>
</body>
<script>
var alertVue = new Vue({
    el: '#app',
    data: {
        modal1: false,
        iframeSrc:'',
        select: [],
        theme2: 'light',
        formLeft: {
            input1: '',
            input2: '',
            input3: ''
        }
    },
    methods: {
        changePage:function(name){
             this.$Message.info(name);
             this.iframeSrc=name+'.html';
        },
        ok() {
            this.modal1 = false;
            this.$Message.info('点击了确定');
        },
        cancel() {
            this.modal1 = false;
            this.$Message.info('点击了取消');
        }
    }
});
</script>

</html>
